<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">

<script type='text/javascript'>

function run(order,limit,average) {
    $.getJSON('http://localhost/bilidata.php?order='+order+'&limit='+limit+'&average='+average+'&callback=?', function (data) {

	$('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'B站8月视频统计'
        },
        subtitle: {
            text: data['name']
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -30,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '数量 '
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: '<b>{point.y:.0f}</b>'
        },
        series: [{
            name: data['name'],
            data: data['data'],
            dataLabels: {
                enabled: true,
                rotation: 0,
                color: '#FFFFFF',
                align: 'center',
                format: '{point.y:.0f}', // one decimal
                y: 0, // 10 pixels down from the top
                style: {
                    fontSize: '8px',
                    fontFamily: 'Verdana, sans-serif',
					fontWeight: "bold"
                }
            }
        }]
    });
    });
}
</script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div class="am-g am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">统计类型</div>
            <div class="am-u-sm-8 am-u-md-10">
              <div class="am-btn-group" data-am-button="">
                <label class="am-btn am-btn-default am-btn-xs am-active" vName="order" vValue="play">
                  <input type="radio" name="order" value="play"> 播放
                </label>
                <label class="am-btn am-btn-default am-btn-xs" vName="order" vValue="coin">
                  <input type="radio" name="order" value="coin"> 硬币
                </label>
                <label class="am-btn am-btn-default am-btn-xs" vName="order" vValue="collect">
                  <input type="radio" name="order" value="collect"> 收藏
                </label>
				<label class="am-btn am-btn-default am-btn-xs" vName="order" vValue="danmu">
                  <input type="radio" name="order" value="danmu"> 弹幕
                </label>
              </div>
            </div>
</div>

<div class="am-g am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">up主数量</div>
            <div class="am-u-sm-8 am-u-md-10">
              <div class="am-btn-group" data-am-button="">
                <label class="am-btn am-btn-default am-btn-xs am-active" vName="limit" vValue="10">
                  <input type="radio" name="limit" value="10"> 10
                </label>
                <label class="am-btn am-btn-default am-btn-xs" vName="limit" vValue="15">
                  <input type="radio" name="limit" value="15"> 15
                </label>
                <label class="am-btn am-btn-default am-btn-xs" vName="limit" vValue="20">
                  <input type="radio" name="limit" value="20"> 20
                </label>
              </div>
            </div>
</div>
<div class="am-g am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">按视频平均数</div>
            <div class="am-u-sm-8 am-u-md-10">
              <div class="am-btn-group" data-am-button="">
                <label class="am-btn am-btn-default am-btn-xs" vName="average" vValue="1">
                  <input type="radio" name="average" value="1"> 是
                </label>
                <label class="am-btn am-btn-default am-btn-xs am-active" vName="average" vValue="0">
                  <input type="radio" name="average" value="0"> 否
                </label>
              </div>
            </div>
</div>


<script type="text/javascript">
$(function(){
	$(".am-btn-xs").change(function(){
		$(this).siblings().removeClass("am-active");
		$(this).addClass("am-active");
		var order = $("label[vName='order'].am-active").attr("vValue");
		var limit = $("label[vName='limit'].am-active").attr("vValue");
		var average = $("label[vName='average'].am-active").attr("vValue");
		
		if(order !='' && limit!='' ){
			run(order,limit,average);
		}
	});
	
	run("play",10,0);
});
</script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<html>